<template>
    <div id="shareConfig">
        <header>
            <div class="P_date">
                <span>时间：</span>
                <gDate @faithDate="faithDate"></gDate>
            </div>
            <div class="P_type">
                <div class="Choice">
                    <el-form ref="form">
                        <el-form-item label="活动区域">
                            <el-select v-model="form.selectedOptions" placeholder="请选择活动区域" @change="handleChange">
                                <el-option label='全部小程序' value='' >全部小程序</el-option>
                                <el-option :label=item.appname :value=item.appid v-for="(item,index) in form.programList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-button @click="search">搜索</el-button>
                    </el-form>
                </div>
            </div>
            <el-button type="primary" class="addBtn" @click="addBtn">添加</el-button>
        </header>
        <main>
            <el-table :data="tableData" border style="width: 100%" stripe>
                <el-table-column prop="path" label="SID"></el-table-column>
                <el-table-column prop="appname" label="小程序名称"></el-table-column>
                <el-table-column prop="type" label="模块名称"></el-table-column>
                <el-table-column prop="logo" label="图片">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.imgUrl}}</p>
                            <div slot="reference">
                                <img :src=scope.row.imgUrl alt="">
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="分享文案"></el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="modifyClick(scope.row.id)" type="text" size="small">修改</el-button>
                        <el-button type="text" size="small" @click="removeClick(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="currPage">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :current-page=currentPage
                    @current-change="handleCurrentChange"
                    :total=total>
                </el-pagination>
            </div>
        </main>
    </div>
</template>
<script>
import gDate from '../G_Date/gdate';
import shareConfigAdd from '../add/shareConfigAdd'
import shareConfigModify from '../modify/shareConfigModify'
import { iframe,addList,ModifyList,RemoteList,DataList,getChannel } from '@/assets/js'
export default {
    components:{
        gDate:gDate
    },
    data(){
        return {
            form:{
                selectedOptions:'',//下拉内容
                programList:[]//小程序列表
            },
            obj:{},//时间
            currentPage:1,//分页
            tableData:[],
            pageSize:2,
            total:0
        }
    },
    methods:{
        removeClick:function(e){//删除
            let data = {
                id:e
            }
           RemoteList(this,data,e,'share/delShare')
        },
        modifyClick(e){//修改
            var obj = {}
            this.tableData.map((item,index)=>{
                if(item.id == e){
                    obj.id = item.id;
                    obj.appname = item.appname;
                    obj.appid = item.appid;
                    obj.type = item.type;
                    obj.title = item.title;
                    obj.imgUrl = item.imgUrl;
                    return obj
                }
            })
            ModifyList(this,obj,shareConfigModify)
        },
        addBtn:function(){//新增
            addList(this,shareConfigAdd)
        },
        handleCurrentChange:function(page){
            this.CurrData(page)
        },
        faithDate:function(e){//时间组件
            this.obj.startTime = e[0]
            this.obj.endTime = e[1]
        },
        handleChange:function(e){//change小程序下拉
            // console.log(e)
            this.obj.appid = this.form.selectedOptions
        },
        search:function(){//搜索
        this.currentPage = 1
            this.CurrData()
        },
        operateList:function(){//获取小程序列表
            let url = 'program/selectProgram'
            let data = {}
            this.$axios.getAddressJson(url,data)
            .then(res=>{
                this.form.programList = res.data.data
                //console.log(res)
            })
            .catch(res=>{
                // console.log(res)
            })
        },
        CurrData:function(page){
            let data = {
                startTime:this.obj.startTime?this.obj.startTime:'',
                endTime:this.obj.endTime?this.obj.endTime:'',
                appid:this.obj.appid?this.obj.appid:'',
                page: page && typeof page != undefined ? page : this.currentPage
            }
            DataList(this,data,'share/shareList')
        }
    },
    mounted:function(){
        this.operateList()
        this.CurrData()
        
    }
}
</script>

